<template>
  <section class="footer">
    <ul>
        <li :class="$route.path.indexOf('home') !== -1 ? 'hover' : '#home'"><a @click="gotoAddress({path: '/home', query: {geohash}})"><span class="iconfont">&#xe606;</span><span>首页</span></a></li>
        <li :class="$route.path.indexOf('find') !== -1 ? 'hover' : '#find'"><a @click="gotoAddress('/find')"><span class="iconfont">&#xe63b;</span><span>发现</span></a></li>
        <li :class="$route.path.indexOf('order') !== -1 ? 'hover' : '#order'"><a @click="gotoAddress('/order')"><span class="iconfont">&#xe609;</span><span>订单</span></a></li>
        <li :class="$route.path.indexOf('profile') !== -1 ? 'hover' : '#profile'"><a @click="gotoAddress('/profile')"><span class="iconfont">&#xe639;</span><span>我的</span></a></li>
    </ul>
  </section>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Footer',
  computed: {
    ...mapState(['geohash'])
  },
  methods: {
    gotoAddress (path) {
      this.$router.push(path)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .footer
    min-height: 1rem;
    position: fixed
    left: 0
    right: 0
    bottom: 0
    z-index: 99
    background-color: #fff
    box-shadow: 0 -0.02rem 0.05rem rgba(0,0,0,.1)
    ul
      display: flex
      align-items: center
      justify-content: space-between
      li
        width: 25%
        a
          width: 100%
          min-height: 1rem;
          display: flex
          flex-direction: column
          align-items: center
          justify-content: center
          font-size: .20rem
          span.iconfont
            display: block
            width: .5rem
            line-height: .5rem
            font-size: .40rem
            text-align: center
      li:nth-child(1) a span.iconfont
        font-size: .30rem
      li.hover a
        color: #0089dc
</style>
